Hello, 各位 iT 邦幫忙 的粉絲們大家好~~~

在本系列文會延續 Re: 從零改用 .NET MAUI 技術來繼續過去用 Xamarin 技術開發的一個 App : TopStore 使用 .NET MAUI 技術所建立的 TopStore App ，更新 .NET MAUI 在 .NET 6 轉換到 .NET 7 時所需要調整的部分，並持續地的開發 TopStore App 其他需要的功能。

本篇是 Re: 從零續用 .NET MAUI 技術開發過去的一個 App : TopStore 系列 系列文的 EP30。

接著就要處理 Order 資料的刪除的處理，而要處理當然也就要調整 MockData、DataService 與 IDataService 的設計。

首先，在 IDataService 增加一個 DeleteOrder 方法的宣告，並透過實作介面的處理幫 MockData 與 DataService 都實作好 DeleteOrder 方法。

在 IDataService：

int DeleteOrder(int orderId);

完成結果如下圖：

在 DataService:

public int DeleteOrder(int orderId)
{
    throw new NotImplementedException();
}

完成結果如下圖：

在 MockData:

public int DeleteOrder(int orderId)
{
    var needDeleteOrderDetails = orderDetails.Where((orderDetail) => orderDetail.OrderId == orderId).ToList();

    foreach (var orderDetail in needDeleteOrderDetails)
    {
        orderDetails.Remove(orderDetail);
    }
    
    return orders.Remove(orders.FirstOrDefault((order) => order.Id == orderId)) ? 1 : 0;
}

由於刪除掉某筆 Order 的時候，也要同時刪除該筆 Order 所關聯到的 OrderDetail(s)，因此就透過該 Order 帶入的 OrderId 去查出相關的 OrderDetail(s) 並刪除後，再將該 Order 刪除。

完成結果如下圖：

而由於是要在訂單擁有者列表的這個畫面進行刪除的處理，所以繼續要調整的是 OrderOwnersPage 與 OrderOwnersPageViewModel。

首先，先在 OrderOwnersPageViewModel 設計一個 Delete 方法：

[RelayCommand]
private async void Delete(OrderOwner orderOwner)
{
    var isDelete = await Shell.Current.DisplayAlert("確定刪除...", $"{orderOwner.Owner} 的這筆訂單?" , "確定", "取消");
    if (isDelete)
    {
        var deleteSuccess = App.DataService.DeleteOrder(orderOwner.OrderId);
        if (deleteSuccess == 1)
            OrderOwners.Remove(orderOwner);
    }
}

完成結果如下圖：

接著再到 OrderOwnersPage 調整畫面的設計，找到原本設計的 CollectionView 除了將原本的 SelectionMode 屬性改為 "None" 之外，並在其 DataTemplate 中增加 SwipeView 的設計：

<SwipeView>
    <SwipeView.LeftItems>
        <SwipeItems>
            <SwipeItem
                BackgroundColor="Red"
                Command="{Binding Source={RelativeSource 
                                    AncestorType={x:Type viewmodels:OrderOwnersPageViewModel}}, 
                                    Path=DeleteCommand}"
                CommandParameter="{Binding Source={RelativeSource Self}, Path=BindingContext}"
                Text="刪除" />
        </SwipeItems>
    </SwipeView.LeftItems>
...
</SwipeView>

完成結果如下圖：

接著來看看上述設計所完成的實際操作：

1. 從訂單列表中選取某天的訂單進到訂單擁有者列表：
   

2. 在訂單擁有者列表當中選取某筆訂單擁有者項目並向右滑動：
   

3. 點選左側出現的 "刪除" 按鈕後出現提示對話框訊息，點選 "確定"：
   

4. 訂單擁有者列表中就少了該筆訂單：
   

5. 返回上一層的訂單列表中的該天訂單數量也減少 1：